<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片加载器</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        .control-panel {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }

        .path-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        .path-input:focus {
            outline: none;
            border-color: #007bff;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background: #0056b3;
        }

        .btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .image-preview {
            text-align: center;
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        #previewImage {
            max-width: 100%;
            max-height: 500px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .status-message {
            padding: 12px;
            border-radius: 6px;
            margin: 15px 0;
            font-weight: bold;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status-loading {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .hidden {
            display: none;
        }

        .file-info {
            margin-top: 15px;
            padding: 12px;
            background: #e7f3ff;
            border-radius: 6px;
            border-left: 4px solid #007bff;
        }

        .example-paths {
            margin-top: 15px;
            padding: 12px;
            background: #fff3cd;
            border-radius: 6px;
            font-size: 14px;
        }

        .example-paths h4 {
            margin: 0 0 8px 0;
            color: #856404;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>🖼️ 图片加载器</h1>

    <div class="control-panel">
        <h3>加载图片</h3>
        <input type="text" id="imagePath" class="path-input"
               placeholder="输入图片绝对路径，例如：D:/images/1-1-1-1.jpg">

        <button class="btn btn-primary" onclick="loadImage()" id="loadBtn">
            加载图片
        </button>

        <div id="statusMessage" class="status-message hidden"></div>

        <div class="example-paths">
            <h4>示例路径：</h4>
            <div>D:/images/1-1-1-1.jpg</div>
            <div>D:/images/avatar.png</div>
            <div>D:/images/products/item1.jpeg</div>
        </div>
    </div>

    <div class="image-preview hidden" id="imagePreview">
        <img id="previewImage" src="" alt="图片预览">
        <div class="file-info">
            <strong>文件信息：</strong>
            <span id="fileInfo">-</span>
        </div>
    </div>
</div>

<script>
    // 加载图片函数
    function loadImage() {
        const absolutePath = $('#imagePath').val().trim();

        if (!absolutePath) {
            showStatus('请输入图片路径', 'error');
            return;
        }

        // 显示加载状态
        showStatus('正在加载图片...', 'loading');
        $('#loadBtn').prop('disabled', true);
        $('#imagePreview').addClass('hidden');

        // 调用后端API转换路径
        $.ajax({
            url: '/apiImages/convertPath',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ path: absolutePath }),
            success: function(response) {
                if (response.success) {
                    const webUrl = response.webUrl;
                    const fileName = response.fileName;
                    console.log("weburl: "+webUrl);
                    // 设置图片src并显示
                    $('#previewImage')
                        .attr('src', webUrl)
                        .attr('alt', fileName)
                        .on('load', function() {
                            showStatus('图片加载成功！', 'success');
                            $('#imagePreview').removeClass('hidden');
                            $('#fileInfo').text(`文件名: ${fileName} | 路径: ${absolutePath}`);
                            $('#loadBtn').prop('disabled', false);
                        })
                        .on('error', function() {
                            showStatus('图片显示失败，请检查文件是否存在', 'error');
                            $('#imagePreview').addClass('hidden');
                            $('#loadBtn').prop('disabled', false);
                        });
                } else {
                    showStatus('加载失败: ' + response.message, 'error');
                    $('#loadBtn').prop('disabled', false);
                }
            },
            error: function(xhr) {
                showStatus('请求失败: ' + (xhr.responseJSON?.message || '网络错误'), 'error');
                $('#loadBtn').prop('disabled', false);
            }
        });
    }

    // 显示状态消息
    function showStatus(message, type) {
        const $status = $('#statusMessage');
        $status.removeClass('hidden status-success status-error status-loading')
            .addClass(`status-${type}`)
            .text(message);
    }

    // 回车键支持
    $('#imagePath').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            loadImage();
        }
    });

    // 页面加载完成后的初始化
    $(document).ready(function() {
        console.log('图片加载器已初始化');

        // 可以在这里预设一个示例路径（可选）
        // $('#imagePath').val('D:/images/example.jpg');
    });
</script>
</body>
</html>
